import React, { useState } from 'react'
import styles from './index.module.scss'
import NavBar from '@/components/NavBar'
import TextArea from '@/components/TextArea'
import Input from '@/components/Input'
import { useSelector } from 'react-redux'

export default function EditInput({ onClose, type }) {
    const defaultValue = useSelector(state => state.profile.profile[type])

    // useState的初始值只会执行一次, defaultValue的初始值为undefined, 即使后面值改变了, 也不会在重写执行初始值
    const [value, setValue] = useState(defaultValue || '')

	return (
		<div className={styles.root}>
			<NavBar
				extra={<span className="commit-btn">提交</span>}
				onLeftClick={() => {
					onClose()
				}}
			>
				编辑{type === 'name' ? '昵称' : '简介'}
			</NavBar>
			<div className="content">
				<h3>{type === 'name' ? '昵称' : '简介'}</h3>
				{type === 'name' ? (
					<Input type="text" autoFocus classNames="input-wrap" value={value} onChange={(e) => setValue(e.target.value)}/>
				) : (
					<TextArea
						maxLength={200}
						placeholder="请输入昵称"
						onChange={(e) => setValue(e.target.value)}
                        value={value}
					/>
				)}
			</div>
		</div>
	)
}
